Hi 終於來到第15天了(一半了!!!)
今天要寫的是關於Sass-Loop迴圈，迴圈很常與前幾天介紹Lists與Maps一起使用～

@for

@for <變數> from <起始值> through <終止值>{}
@for <變數> from <起始值> to <終止值>{}

*through為有包含終止值 ; to則為不包含終止值

簡而言之，@for是起始值跑到終止值的迴圈，我們直接來看例子：

@for $i from 1 through 5 {
  .h-#{$i} {
    font-size: (5 - $i + 1) * 10px;
  }          //簡單的四則運算，使值不等於0
}

其中 $i 為變數，1為起始值，5為終止值，#{}括號中的內容會被Sass編譯
迴圈會由變數=1、變數=2...直到變數=5，
編譯出來的css結果會變成

.h-1 { font-size: 50px; }
.h-2 { font-size: 40px; }
.h-3 { font-size: 30px; }
.h-4 { font-size: 20px; }
.h-5 { font-size: 10px; }

@each

@each <變數> in < list >{}
@each <變數> in < map >{}

簡而言之，@each是將list或map每個項目都跑過一次的迴圈，
我們直接來看例子：

list

$font-size: 10px, 25px, 40px; //list型態
@each $size in $font-size {
  .size-#{$size} {
    font-size: $size;
  }
}

其中 $size 為變數，#{}括號中的內容會被Sass編譯，
迴圈會將list中的每個項目都跑過一次，
編譯出來的css為

.size-10px { font-size: 10px; }
.size-25px { font-size: 25px; }
.size-40px { font-size: 40px; }

map

$color-array: (
  red: #E65165,
  green: #51E671,
  blue: #51E671
);  //map型態
@each $key, $value in $color-array {
  .bg-#{$key} {
    background: $value;
  }
}

其中 $color-array 為map型態的變數，map可以同時取得key與value的值，
#{}括號中的內容會被Sass編譯，迴圈會將map中的每個key都跑過一次，
編譯出來的css為

.bg-red { background: #E65165; }
.bg-green { background: #51E671; }
.bg-blue { background: #51E671; }

今天就先到這邊囉，有機會再分享更多Loop的筆記！

參考資料：
https://timchen0607.medium.com/scss-%E9%82%A3%E4%BA%9B%E5%B9%B4%E6%88%91%E5%80%91%E4%B8%80%E8%B5%B7%E8%B7%91%E7%9A%84%E8%BF%B4%E5%9C%88-c366984fc7f0